<template>
	<view class="novel_classify">
		<navComponent :options="options" @SEL="selectSEL"></navComponent>
		<myNovel :novelList="novelList"></myNovel>
	</view>
</template>

<script>
	import myNovel from '../../components/my_novel/my_novel.vue'
	import navComponent from '../../components/nav_component/nav_component.vue'
	export default {
		data() {
			return {
				options: [],
				novelList: [],

				sel: 0,

				queryObj: {
					limit: 10,
					page: 1,
					classify: '全部'
				},
				total: 0,
				isLoading: false
			};
		},
		components: {
			myNovel,
			navComponent
		},

		onLoad(option) {
			uni.showLoading({
				title: '数据加载中'
			})
			this.getOptions()
			this.getNovelList()
		},

		onReachBottom() {
			if (this.queryObj.page * this.queryObj.limit >= this.total) return uni.showToast({
				title: '数据已经空啦',
				icon: 'success'
			})
			this.queryObj.page += 1
			if (this.isLoading) return
			this.getNovelList()
		},

		onPullDownRefresh() {
			this.total = 0
			this.isLoading = false
			this.novelList = []
			this.queryObj.page = 1
			this.getNovelList(() => {
				uni.stopPullDownRefresh()
			})
		},

		methods: {
			async getOptions() {
				const {
					data: res
				} = await this.$myRequest({
					url: '/my/options?classify=小说'
				})
				this.options = res.data
				for (let i = 0; i < this.options.length; i++) {
					this.options[i].id = i + 1
				}
			},
			
			selectSEL(val) {
				this.sel = val
				// this.sel = parseInt(this.sel)
				for (let i = 0; i < this.options.length; i++) {
					if (this.sel == this.options[i].id) {
						// console.log(this.options[i].id)
						if (this.options[i].classify == '其它') {
							this.queryObj.classify = '其他'
							this.queryObj.page = 1
							this.novelList = []
							this.getNovelList()
							break
						}
						this.queryObj.classify = this.options[i].classify
						this.queryObj.page = 1
						this.novelList = []
						this.getNovelList()
						break
					}
					if (this.sel == 0) {
						this.queryObj.classify = '全部'
						this.queryObj.page = 1
						this.novelList = []
						this.getNovelList()
						break
					}
				}
				
			},
			
		
			
			async getNovelList(cb) {
				this.isLoading = true
				uni.showLoading({
					title: '数据加载中'
				})

				const {
					data: res
				} = await this.$myRequest({
					url: '/my/article/novel',
					data: this.queryObj
				})

				uni.hideLoading()

				if (res.status != 0) {
					return uni.showToast({
						title: '请求失败可能是参数错误',
						duration: 1500,
						icon: 'none'
					})
				}

				cb && cb()

				this.novelList = [...this.novelList, ...res.data]
				this.total = res.total
				this.isLoading = false
			}
		}
	}
</script>

<style lang="scss">
	.Novel {
		background-color: #fff;
	}

	.novelList {
		display: flex;
		padding: 40rpx 40rpx;
		padding-bottom: 0;
		border-bottom: 1px solid #949bad;
		border-radius: 10px;
		box-shadow: -3px 4px 5px rgba(0, 0, 0, 0.3);

		image {
			width: 240rpx;
			height: 330rpx;
			border-radius: 10px;
		}

		.right {
			.title {
				font-weight: 700;
				padding-left: 20rpx;
				font-size: 30rpx;
			}

			.novel_info {
				word-break: break-all;
				margin: 20rpx;
				color: #5d5d5d;
				font-size: 26rpx;
			}

			.other_info {
				display: flex;
				margin-top: 40rpx;
				padding-left: 20rpx;
				color: #949bad;
				font-size: 24rpx;

				text:nth-of-type(2) {
					margin-left: 30rpx;
				}
			}
		}
	}
</style>
